<template>
  <div class="add">
    <div class="title">请进行工序工艺确认</div>
    <div class="form">
      <template v-if="processTechnologyList.length">
        <div v-for="item in processTechnologyList" :key="item.standardId">
          <div class="form-title">{{ item.standardName }}</div>
          <div class="form-item" v-for="subItem in item.children" :key="subItem.standardId">
            <div class="sub-title">{{ subItem.standardName }}</div>
            <el-select v-model="subItem.selectedVal" placeholder="请选择">
              <el-option
                v-for="thTtem in subItem.children"
                :key="thTtem.standardId"
                :label="thTtem.standardName"
                :value="thTtem.standardId"
              />
            </el-select>
          </div>
        </div>
      </template>
      <el-empty v-else />
    </div>
  </div>
</template>
<script setup>
import { computed } from "vue";

let props = defineProps(["modelValue"]);
let $emit = defineEmits(["update:modelValue"]);
const processTechnologyList = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    $emit("update:modelValue", val);
  }
});
</script>
<style scoped lang="scss">
@use "@/assets/styles/mixin";
.add {
  @include mixin.flex-column;
  margin-bottom: 30px;
  .title {
    font-size: 18px;
    color: #131414;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }

  .form {
    position: relative;
    flex: 1;
    overflow-y: auto;
    .form-title {
      font-size: 14px;
      color: #3d3d3d;
      margin: 20px 0px 15px 0px;
    }

    .form-item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;

      .sub-title {
        width: 60px;
        text-align: right;
        white-space: nowrap;
        margin-right: 10px;
        font-size: 14px;
        color: #86909c;
      }
    }
  }

  .btns {
    text-align: center;
    margin-top: 30px;
    :deep(.el-button) {
      width: 92px;
    }
  }
}
:deep(.el-select__wrapper) {
  background-color: #f5f7fa;
  box-shadow: none;
  color: #1a1a1a;
}
:deep(.el-empty) {
}
</style>
